<?php
if( empty( $_SESSION ) )
{
	session_start();
}
header("Content-Type: text/html; charset=utf-8",true);

include_once("../../includes/restrito.php");
include_once("../models/cls.capa.php");

$oCapa = new capa();
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ordenar matérias de capa</title>
<script type="text/javascript" src="../../includes/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../../includes/jquery-ui-1.7.1.custom.min.js"></script>
<style>
* {	margin: 0; padding: 0; }
body {
	font: 0.9em Arial;
	padding: 10px; 
}
#info {
	display: block;
	padding: 10px;
	border: 1px solid #333;
	background-color: #FC0;
	margin-bottom:10px;
}
#test-list {
	list-style: none;
}
#test-list li {
	display: block;
	padding: 10px;
	margin-bottom: 3px;
	background-color: #efefef;
}
#test-list li img.handle {
	cursor: move;
	margin-right:20px;
}
#ordem
{
	float:right;
	width:20%;
}
</style>
<script type="text/javascript">
$(function(){

	$("div.texto p").hide();
	
    $("#test-list").sortable({
		handle : '.handle',
		update : function() {
			var order = $('#test-list').sortable('serialize');
			$("#ordem").load("ordem.php?" + order);
		}
    });

    $("a#expandir").click(function(){
		$("div.texto p").show();
    });

    $("a#reduzir").click(function(){
		$("div.texto p").hide();
    });
    
});
</script>
</head>
<body>
<div id="info">
	<div id="img" style="float:left;padding-top:10px;">
		Clique no ícone <img src="../imagens/arrow.png" class="handle" align="absmiddle" /> e arraste-o para ordenar as matérias da capa
	</div>
	<div id="controle" style="float:left;margin-left:10px;">
		<a href="javascript:;" id="expandir">
			<img src="../imagens/capa_expandir.jpg" border="0" title="Expandir resumo" />
		</a>
		<a href="javascript:;" id="reduzir">
			<img src="../imagens/capa_reduzir.jpg" border="0" title="Recolher resumo" />
		</a>
	</div>
	<div id="ordem">
	</div>
	<hr style="clear:both;border:0px;" />
</div>

<?php
$aDados = $oCapa->select_capa( $_GET["id"] );
echo '<ul id="test-list">';
foreach( $aDados as $sValor )
{
	echo '<li id="listItem_'. $sValor["id"] .'">
	
		<div class="img" style="float:left;width:5%;">
			<img src="../imagens/arrow.png" alt="move" align="absmiddle" class="handle" />
		</div>
		
		<div class="texto" style="float:right;width:90%;font-size:10px">
			<h3>' . $sValor["titulo"] . '</h3>
			<p>
				' . $sValor["resumo"] .'
			</p>
		</div>
		<hr style="clear:both;border:0px;" />
	';
	echo '</li>';
}
echo '</ul>';
?>
</body>
</html>